<template>
	<el-dialog title="添加部门" :visible.sync="dialogVis" :close-on-click-modal="false" width="300px" center @close="cancelClick">
		<div class="dep-page">
			<div class="marg-B2">
				<el-input type="text" v-model="departName" placeholder="请输入部门名称"></el-input>
			</div>
			<div class="btn-box">
				<el-button class="btn gray" type="primary" @click="cancelClick">取消</el-button>
				<el-button class="btn b-bg" type="primary" @click="sureClick">确认</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {request} from "@/assets/js/utils/request";
	export default {
		props: ['isDeptDialog','departInfo','departType'],
		data() {
			return {
				departName: '',
				dialogVis: false
			}
		},
		methods: {
			sureClick() {
				if(!this.departName) {
					this.$message({
						message: '部门名称不能为空',
						type: 'error'
					});
					return false
				}
				if(this.departType === 'edit') {
					let formData = new FormData();
					formData.append('branch_title',this.departName)
					formData.append('branch_id',this.departInfo.branch_id);
					request({
						url: '/user/branch/edit',
						method: 'POST',
						data: formData
					}).then(res => {
						if(res.code == 200) {
							this.$message({
								message: '修改成功',
								type: 'success'
							});
							this.dialogVis = false
							this.$emit('depCancel')
						} else {
							this.$message.error(res.message);
						}
					})
				} else {
					let formData = new FormData();
					formData.append('branch_title',this.departName)
					request({
						url: '/user/branch/create',
						method: 'POST',
						data: formData
					}).then(res => {
						if(res.code == 200) {
							this.dialogVis = false
							this.$emit('depCancel')
							this.$message({
								message: '添加成功',
								type: 'success'
							});
						} else {
							this.$message.error(res.message);
						}
					})
				}
			},
			cancelClick() {
				this.dialogVis = false
				this.$emit('depCancel')
			}
		},
		watch: {
			isDeptDialog(newVal) {
				this.dialogVis = newVal
				if(this.departInfo) {
					this.departName = this.departInfo.branch_title
				}
			}
		}
	}
</script>

<style lang="less" scope>
	/deep/.el-dialog{
		border-radius: 15px;
	}
	.dep-page{
		.btn-box{
			text-align: center;
			.btn{
				font-size: 14px;
				padding: 0;
				color: #fff;
				width: 96px;
				height: 28px;
				text-align: center;
				line-height: 28px;
				border: none;
				border-radius: 25px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
			.gray{
				background: #A6A6A6;
			}
		}
	}
	// .fiexd-box{
	// 	position: fixed;
	// 	bottom: 10%;
	// 	left: 0;
	// 	.fiexd-wrap{
	// 		height: 40rpx;
	// 		opacity: 1;
	// 		border-radius: 50px;
	// 		background: rgba(41, 103, 227, 1);
	// 		.t{
	// 			font-size: 32rpx;
	// 			font-weight: 500;
	// 			letter-spacing: 0px;
	// 			line-height: 23.17px;
	// 			color: rgba(41, 103, 227, 1);
	// 			text-align: left;
	// 			vertical-align: top;
	// 		}
	// 		image{
	// 			width: 32rpx;
	// 		}
	// 	}
	// }
	// .fiexd-box{
	// 	width: 100%;
	// 	height: 160rpx;
	// 	padding: 50rpx;
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 0;
	// 	text-align: center;
	// 	.sub-btn{
	// 		width: 100%;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		border-radius: 50px;
	// 		color: #fff;
	// 		background: #2967E3;
	// 	}
	// }
</style>